<template>
  <div class="Newdagre">
    <svg width="960" height="1000" />

    <div class="chartTooltip">
      <p id="chartTooltipText">
        <span class="chartTooltip-textMoney" />
      </p>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import dagreD3 from 'dagre-d3'

export default {
  name: 'Newdagre',
  mounted() {
    this.typeNode()
  },
  methods: {
    typeNode() {
      const g = new dagreD3.graphlib.Graph().setGraph({ rankdir: 'BT' })

      const states = {
        circle: { shape: 'circle' },
        Start: { shape: 'circle', style: 'fill: #f77' },
        JW002: { shape: 'circle' },
        JW003: { shape: 'circle' },
        JW004: { shape: 'circle' },
        JW005: { shape: 'circle' },
        JW006: { shape: 'circle' },
        JW007: { shape: 'circle' },
        JW008: { shape: 'circle' },
        JW009: { shape: 'circle' },
        JW010: { shape: 'circle' },
        JW011: { shape: 'circle' },
        JW012: { shape: 'circle' },
        JW013: { shape: 'circle' },
        JW014: { shape: 'circle' },
        JW015: { shape: 'circle' },
        JW016: { shape: 'circle' },
        End: { shape: 'circle' },
      }

      Object.keys(states).forEach(function (state) {
        const value = states[state]
        value.label = state
        value.padding = 0
        value.height = 30
        value.width = 30
        value.r = 15
        value.rx = value.ry = 5
        g.setNode(state, value)
      })

      g.setEdge('circle', 'JW002', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('Start', 'JW003', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('Start', 'JW004', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW002', 'JW005', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW002', 'JW006', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW003', 'JW006', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW003', 'JW007', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW004', 'JW008', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW004', 'JW009', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW005', 'JW010', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW005', 'JW011', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW005', 'JW012', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW006', 'JW013', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW007', 'JW014', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW007', 'JW015', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW008', 'JW016', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW009', 'JW015', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW009', 'JW016', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW010', 'End', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW011', 'End', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW012', 'End', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW013', 'End', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW014', 'End', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW015', 'End', { label: '001 ', lineInterpolate: 'basis' })
      g.setEdge('JW016', 'End', { label: '001 ', lineInterpolate: 'basis' })

      const render = dagreD3.render()
      const svg = d3.select('svg')
      const inner = svg.append('g')

      // console.log(render)
      // console.log(g)

      render(inner, g)

      d3.select('svg')
        .select('g.output')
        .attr('width', '1000')
        .attr('height', '1000')

      const nodeEnter = d3.select('svg').selectAll('g.node')

      nodeEnter
        .select('circle')
        .on('mouseover', function (d) {
          if (this.timer) clearTimeout(this.timer)

          d3.select('.chartTooltip')
            .transition()
            .duration(300)
            .style('opacity', 1)
            .style('display', 'block')

          const yPosition = d3.event.layerY + 20
          const xPosition = d3.event.layerX + 20
          const chartTooltip = d3
            .select('.chartTooltip')
            .style('left', xPosition + 'px')
            .style('top', yPosition + 'px')

          chartTooltip.select('.chartTooltip-textMoney').text('地址：' + d)

          d3.select('.chartTooltip')
            .on('mouseover', () => {
              if (this.timer) clearTimeout(this.timer)

              d3.select('.chartTooltip')
                .transition()
                .duration(300)
                .style('opacity', 1)
                .style('display', 'block')
            })
            .on('mouseout', () => {
              this.timer = setTimeout(function () {
                d3.select('.chartTooltip')
                  .transition()
                  .duration(300)
                  .style('opacity', 0)
                  .style('display', 'none')
              }, 200)
            })
        })
        .on('mouseout', () => {
          this.timer = setTimeout(function () {
            d3.select('.chartTooltip')
              .transition()
              .duration(300)
              .style('opacity', 0)
              .style('display', 'none')
          }, 200)
        })

      nodeEnter.select('g.label').attr('transform', 'translate(50, 20)')
    },
  },
}
</script>
<style>
.Newdagre {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.Newdagre svg {
  width: 100%;
  height: 100%;
}
.Newdagre .node rect {
  stroke: #333;
  fill: #fff;
}
.Newdagre .edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 1.5px;
}
.Newdagre .node circle {
  fill: #333;
}
.chartTooltip {
  position: absolute;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  opacity: 0;
}
.chartTooltip p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  word-wrap: break-word;
}
.chartTooltip p span {
  display: flex;
}
</style>
